<template>
  <view class="my-container">
    <view class="setting" @click="$u.route('/pages/account/user_info')">
      <u-icon name="setting" size="30" color="#fff"></u-icon>
    </view>
    <view class="top">
      <view class="user">
        <view class="left">
          <view class="header">
            <image v-if="logined" :src="user.avatar" mode="scaleToFill" />
            <image
              v-else
              src="../../static/images/user_avatar_default.png"
              mode="scaleToFill"
            />
          </view>
          <view
            class="user-info"
            @click="$u.route('/pages/account/login_password')"
            v-if="!logined"
          >
            <view class="login-text">登录/注册</view>
            <view class="hint">点击此处立即登录/注册</view>
          </view>
          <view v-else class="user-info">
            <view class="login-text">{{ user.nickname }}</view>
            <view class="hint"
              >{{ user.distribution && user.distribution.name
              }}<text style="margin-left: 10rpx">UID:{{ user.id }}</text></view
            >
          </view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" size="20" color="#fff"></u-icon>
        </view>
      </view>
      <view class="card-num">
        <template v-for="(cardItem, index) in cardList">
          <view class="card-item">
            <view class="num">{{ cardItem.num }}</view>
            <view class="label">{{ cardItem.name }}</view>
          </view>
        </template>
      </view>
      <view class="vip" @click="$u.route('/pages/account/vip')">
        <view class="content">
          <view class="vip-content">
            <image
              class="vip-icon"
              src="../../static/images/vip-icon.png"
              mode="scaleToFill"
            />
          </view>

          <view class="text">升级VIP专享超值权益</view>
          <view class="upgrade"> 去升级 </view>
        </view>
      </view>
    </view>
    <view class="my-info">
      <template v-for="(item, index) in myInfoList">
        <view class="item" @click="myInfoCLick(item)">
          <view class="title">{{ item.title }}</view>
          <view class="num">{{ item.num }}</view>
        </view>
      </template>
    </view>
    <view class="tool-container">
      <view class="title">常用功能</view>
      <view class="tool-list">
        <template v-for="(item, index) in toolList">
          <view class="item" @click="gotoUrl(item.url)">
            <image class="img" :src="item.img" mode="scaleToFill" />
            <view class="title">{{ item.title }}</view>
          </view>
        </template>
      </view>
    </view>
    <view class="content-list">
      <view
        class="content-item"
        @click="
          $u.route(
            logined ? '/pages/account/wallet' : '/pages/account/login_password'
          )
        "
      >
        <view class="left">
          <image
            class="img"
            src="../../static/images/money.png"
            mode="scaleToFill"
          />
          <view class="title">账户余额</view>
        </view>
        <view class="right">
          <text class="money" v-if="logined">{{ user.wallet }}元</text>
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item">
        <view class="left">
          <image
            class="img"
            src="../../static/images/fapiao.png"
            mode="scaleToFill"
          />
          <view class="title">开具发票</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item" @click="$u.route('/pages/my/collet')">
        <view class="left">
          <image
            class="img"
            src="../../static/images/collect.png"
            mode="scaleToFill"
          />
          <view class="title">我的收藏</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item" @click="$u.route('/pages/article/show?id=99')">
        <view class="left">
          <image
            class="img"
            src="../../static/images/tie.png"
            mode="scaleToFill"
          />
          <view class="title">发帖规则</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item" @click="$u.route('/pages/article/show?id=2')">
        <view class="left">
          <image
            class="img"
            src="../../static/images/lianxi.png"
            mode="scaleToFill"
          />
          <view class="title">联系我们</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item" @click="$u.route('/pages/article/show?id=9')">
        <view class="left">
          <image
            class="img"
            src="../../static/images/about.png"
            mode="scaleToFill"
          />
          <view class="title">关于我们</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="content-item" @click="$u.route('/pages/article/show?id=3')">
        <view class="left">
          <image
            class="img"
            src="../../static/images/book.png"
            mode="scaleToFill"
          />
          <view class="title">用户协议</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>
      </view>
    </view>

    <view class="version">
      <view class="text"
        >{{ config.app_name }} Version {{ config.app_version }}</view
      >
    </view>
  </view>
</template>
<script>
import { request } from "@/utils/http.js";
export default {
  data() {
    return {
      loading: true,
      logined: false,
      config: {},
      cardList: [
        {
          name: "刷新卡",
          num: 0,
          key: "sysxk",
        },

        {
          name: "首页置顶卡",
          num: 0,
          key: "syzdk",
        },
        {
          name: "板块置定卡",
          num: 0,
          key: "bkzdk",
        },
      ],
      myInfoList: [
        {
          title: "我的帖子",
          num: 0,
          url: "/pages/my/postManagement",
          key: "zsz",
        },
        {
          title: "看了我的",
          num: 0,
        },
        {
          title: "我看了的",
          num: 0,
        },
        {
          title: "我的好友",
          num: 0,
        },
      ],
      toolList: [
        {
          title: "联系方式",
          img: "../../static/my-img/lianxi.png",
          url: "/pages/my/contactInformation",
        },
        {
          title: "道具曝光",
          img: "../../static/my-img/daoju.png",
          url: "/pages/my/prop",
        },
        {
          title: "开通VIP",
          img: "../../static/my-img/vip.png",
          url: "/pages/account/vip",
        },
        {
          title: "实名认证",
          img: "../../static/my-img/shiming.png",
          url: "/pages/my/authentication",
        },
      ],
      user: {},
    };
  },
  onLoad(options) {},
  onShow() {
    this.getConfig();
    this.getUser();
    this.getPostNumber();
    this.getUser();
  },
  methods: {
    myInfoCLick(item) {
      const { url } = item;
      this.$u.route(url);
    },
    gotoUrl(url) {
      const token = uni.getStorageSync("user_token");
      if (token) {
        this.$u.route(url);
      } else {
        this.$u.route("/pages/account/login_password");
      }
    },
    getUser() {
      request.post("/user/getLoginUser").then((res) => {
        uni.hideLoading();
        if (res.data.id) {
          this.logined = true;
          this.user = res.data;
          this.cardList.forEach((item) => {
            item.num = res.data[item.key];
          });
        }
      });
    },
    // 获取版本号
    getConfig() {
      request.post("/common/getConfig").then((res) => {
        this.config = res.data;
      });
    },
    getPostNumber() {
      request.post("/xiangmushe/getMyPostsStatusCount").then((res) => {
        console.log(res);
        this.myInfoList.forEach((item) => {
          if (item.key) {
            item.num = res.data[item.key];
          } else {
            item.num = 0;
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.setting {
  background-color: #2b9bfd;
  display: flex;
  justify-content: flex-end;
  padding-top: 40rpx;
  padding-right: 15rpx;
}
.top {
  background-color: #2b9bfd;
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 15rpx 15rpx 30rpx;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
      .header {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .user-info {
        margin-left: 25rpx;
        color: #fff;
        .login-text {
          font-size: 30rpx;
          margin-bottom: 10rpx;
        }
        .hint {
          font-size: 24rpx;
        }
      }
    }
  }
  .card-num {
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #fff;
    font-size: 26rpx;
    padding: 30rpx 0;
    box-sizing: border-box;
  }
  .vip {
    background-color: #262626;
    width: 650rpx;
    height: 80rpx;
    margin: 0 auto;
    border-radius: 30rpx 30rpx 0 0;
    line-height: 80rpx;
    .content {
      display: flex;
      align-items: center;
      // justify-content: space-around;
      .vip-content {
        margin: 0 20rpx;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #d29674;
        display: flex;
        justify-content: center;
        align-items: center;
        .vip-icon {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
        }
      }
      .text {
        color: #d29674;
        font-size: 26rpx;
      }
      .upgrade {
        margin-left: 150rpx;
        border-radius: 20rpx;
        background-color: #f3c6af;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;

        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }
  }
}
.my-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 150rpx;
  background-color: #fff;
  .item {
    .title {
      font-size: 28rpx;
    }
    .num {
      font-size: 26rpx;
      text-align: center;
      margin-top: 8rpx;
    }
  }
}
.tool-container {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 15rpx;
  .title {
    font-size: 28rpx;
  }
  .tool-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    .item {
      width: 150rpx;
      // border: 1rpx solid red;
      margin: 20rpx 10rpx;
      text-align: center;
      .img {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}
.content-list {
  padding: 30rpx 15rpx;
  box-sizing: border-box;
  background-color: #fff;

  .content-item {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f1f3f8;
    .left {
      display: flex;
      align-items: center;
      margin-left: 10rpx;
      .img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .money {
        color: #2b9bfd;
        font-size: 28rpx;
        margin-right: 10rpx;
      }
    }
  }
}
.version {
  height: 100rpx;
  // width: 700rpx;
  line-height: 100rpx;
  text-align: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #999;
  letter-spacing: 5rpx;
  background-color: #fff;
}
</style>
